<template>
  <view>
    <!-- 邀请好友 -->
    <view class="box1">
      <view style="margin: 30rpx"> 参与步骤 </view>
      <view style="display: flex; justify-content: space-between">
        <view
          style="
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            font-size: 25rpx;
            color: gray;
          "
        >
          <image
            src="/static/imgs/fx1.png"
            style="width: 60rpx; height: 60rpx"
          ></image>
          <view style="margin-left: 30rpx">分享链接给好友</view>
        </view>

        <!-- // -->
        <view
          style="
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            font-size: 25rpx;
            color: gray;
          "
        >
          <image
            src="/static/imgs/yhq.png"
            style="width: 60rpx; height: 60rpx"
          ></image>
          <view style="margin-left: 30rpx">好友注册成功</view>
        </view>
        <!-- // -->
        <view
          style="
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            font-size: 25rpx;
            color: gray;
          "
        >
          <image
            src="/static/imgs/zc.png"
            style="width: 60rpx; height: 60rpx"
          ></image>
          <view style="margin-left: 30rpx">好友开通会员</view>
        </view>
        <!-- // -->
        <view
          style="
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            font-size: 25rpx;
            color: gray;
          "
        >
          <image
            src="/static/imgs/yhq.png"
            style="width: 60rpx; height: 60rpx"
          ></image>
          <view style="margin-left: 30rpx">获取奖励</view>
        </view>
      </view>
      <view style="height: 30rpx"></view>
    </view>
    <!-- //我的奖励 -->
    <view class="box1">
      <view style="margin: 30rpx">我的奖励</view>
      <view style="display: flex; justify-content: space-between">
        <view class="yqr">
          <!-- //邀请人 -->
          <view>已成功邀请</view>
          <view style="color: red; font-size: 50rpx">0人</view>
        </view>
        <view style="width: 100rpx"></view>
        <!-- //获取奖励 -->
        <view class="yqr">
          <!-- //邀请人 -->
          <view>已获取奖励</view>
          <view style="color: red; font-size: 50rpx">0元</view>
        </view>
      </view>
      <view style="height: 30rpx"></view>
    </view>

    <!-- //邀请记录 -->
    <view class="box1">
      <view style="margin: 30rpx">邀请记录</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang="less">
.yqr {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.box1 {
  margin: 30rpx;
  background-color: white;
  display: flex;
  border-radius: 10rpx;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
page {
  background-color: #f1f1f1;
}
</style>
